<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>基础控件</title>
		<script type="text/javascript" src="/script/mootools.js"></script>
		<script type="text/javascript" src="/script/mootools-more.js"></script>
		<link rel="stylesheet" type="text/css" href="/script/jspxnet-ui.css" />
		<script type="text/javascript" src="/script/jspxnet.js"></script>
		<script type="text/javascript" src="/script/jspxnet-ui-roc.js"></script>
		<link href="/share/mskin/default/devcenter.css" rel="stylesheet" type="text/css" />
		<script src="/script/vue.js"></script>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>

		<template id="propertyTemplate">
			<div class="con shortText">
				<label class="tit" for="groupName">分组名
					<input name="groupName" type="text" v-model:value="self.groupName" />
				</label>

				<label class="tit" for="propertyName">属性名
					<input name="propertyName" type="text" v-model:value="self.propertyName" />
				</label>

				<label class="tit" for="propertyRange">值域
					<input name="propertyRange" type="text" v-model:value="self.propertyRange" />
				</label>

				<label class="tit" for="propertyDef">默认
					<input name="propertyDef" type="text" v-model:value="self.propertyDef" />
				</label>

				<label class="tit" for="desc">说明
					<input name="desc" type="text" v-model:value="self.desc" />
				</label>

				<div class="tit">
					<span class="jDefButton">
						<i class="jIcoDelete" @click="deletePropertyLine" v-bind:refId="self.propertyName"></i>
					</span>
				</div>
			</div>
		</template>

		<template id="eventTemplate">
			<div class="con shortText">
				<label class="tit" for="eventName">名称
					<input name="eventName" type="text" v-model:value="self.eventName" />
				</label>

				<label class="tit" for="eventCaption">描述
					<input name="eventCaption" type="text" v-model:value="self.eventCaption" />
				</label>

				<label class="tit" for="template">模版
					<textarea name="template" v-model="self.template"></textarea>
				</label>

				<label class="tit" for="desc">说明
					<input name="desc" type="text" v-model:value="self.desc" />
				</label>

				<div class="tit">
					<span class="jDefButton">
						<i class="jIcoDelete" @click="deleteEventLine" v-bind:refId="self.eventName"></i>
					</span>
				</div>
			</div>
		</template>

		<div class="formContainer mWrap">
			<div class="mTitPanel addBoardLogo">
				基础控件
			</div>
			<div class="addConPanel mConPanel">

				<form id="controlBaseForm" v-cloak>
					<div class="row">
						<label class="tit" for="helpTip">说明</label>
						<div class="con">
							基础的控件配置,提供二开是用
						</div>
					</div>
					<div class="row">
						<label class="tit" for="controlType">控件类型</label>
						<div class="con">
							<select v-model="controlType" v-on:change="selectControlType">
								<option v-for="options in enumTypes.controlTypeEnumType" :value="options.value">
									{{options.name}}
								</option>
							</select>
							<span id="controlTypeMsg" class="note"></span>
						</div>
					</div>

					<div class="row">
						<label class="tit" for="platformType">控件类型</label>
						<div class="con">
							<select v-model="platformType" v-on:change="selectPlatformType">
								<option v-for="options in enumTypes.platformEnumType" :value="options.value">
									{{options.name}}
								</option>
							</select>
							<span id="platformTypeMsg" class="note"></span>
						</div>
					</div>
					
					<div class="row">
						<label class="tit" for="name">名称</label>
						<div class="con">
							<input id="name" name="name" type="text" v-model:value="name" />
							<span id="nameMsg" class="note"></span>
						</div>
					</div>
					<div class="row">
						<label class="tit" for="caption">描述名称</label>
						<div class="con">
							<input id="caption" name="caption" type="text" v-model:value="caption" />
							<span id="captionMsg" class="note"></span>
						</div>
					</div>
					<div class="row">
						<label class="tit" for="desc">控件使用说明</label>
						<div class="con">
							<textarea name="desc" v-model="desc" style="height:100px;"></textarea>
						</div>
					</div>
					<div class="row">
						<label class="tit" for="demo">控件例子</label>
						<div class="con">
							<textarea name="demo" v-model="demo" style="height:140px;"></textarea>
						</div>
					</div>
					<div class="row">
						<label class="tit" for="userType">用户类型</label>
						<div class="con">
							<input id="userType" name="userType" type="text" v-model:value="userType" />
							<span id="userTypeMsg" class="note"></span>
						</div>
					</div>
					<div class="row">
						<label class="tit" for="sortType">排序</label>
						<div class="con">
							<input id="sortType" name="sortType" type="number" v-model:value="sortType" />
							<span id="sortTypeMsg" class="note"></span>
						</div>
					</div>

					<div class="row w1column">
						<label class="tit">属性
							<span class="jDefButton" v-on:click="addPropertyLine"><i class="jIcoAdd"></i></span>
						</label>

						<div id="propertyPanel" class="row w1column">
							<property v-for="(item,index) in propertyList" v-bind:self="item"></property>
						</div>
					</div>

					<div class="row w1column">
						<label class="tit">事件
							<span class="jDefButton" v-on:click="addEventLine"><i class="jIcoAdd"></i></span>
						</label>
						<div id="actionPanel" class="row w1column">
							<aevent v-for="item in eventList" v-bind:self="item"></aevent>
						</div>
					</div>

					<div class="buttonPanel">
						<span id="submitBtn" name="method" value="save" type="button" v-on:click="save"
							class="jDefButton"><i class="jIcoSave"></i>确定</span>
						<input id="id" name="id" type="hidden" :value="id" />
					</div>
				</form>
			</div>
		</div>
		<script>
			Vue.prototype.$log = console.log;
			Vue.prototype.$debuger = function() {
				debugger;
			};

			var app = false;
			window.addEvent('domready', function() {

				var id = getUrlParam("id") - 0;
				if (id <= 0) id = 0;

				app = new Vue({
					el: '#controlBaseForm',
					data: function() {
						return {
							"id": 0,
							"name": "",
							"caption": "",
							"desc": "",
							"demo": "",
							"propertyList": [],
							"eventList": [],
							"controlType":0,
							"platformType":0,
							"userType": 1,
							"sortType": 1,
							"enumTypes": {
								"platformEnumType": [{
									"value": 0,
									"name": "任意"
								}, {
									"value": 1,
									"name": "电脑"
								}, {
									"value": 2,
									"name": "手持设备"
								}, {
									"value": 3,
									"name": "PAD"
								}, {
									"value": 9,
									"name": "自定义"
								}],
								"controlTypeEnumType": [{
									"value": 1,
									"name": "布局容器"
								}, {
									"value": 2,
									"name": "基础控件"
								}, {
									"value": 3,
									"name": "高级控件"
								}, {
									"value": 9,
									"name": "自定义"
								}]
							}
						};
					},
					components: {
						property: {
							props: ['item', 'self'],
							template: "#propertyTemplate",
							methods: {
								deletePropertyLine: function(event) {
									var refid = event.target.getAttribute('refid');
									app.propertyList.forEach(function(item, index, arr) {
										if (item.propertyName == refid) {
											app.propertyList.splice(index, 1); //满足条件 根据下标删除该元素
										}
									});
									app.$forceUpdate();
								}
							}
						},
						aevent: {
							props: ['item', 'self'],
							template: "#eventTemplate",
							methods: {
								deleteEventLine: function(event) {
									var refid = event.target.getAttribute('refid');
									app.eventList.forEach(function(item, index, arr) {
										if (item.eventName == refid) {
											app.eventList.splice(index, 1); //满足条件 根据下标删除该元素
										}
									});
									app.$forceUpdate();
								}
							}
						}
					},
					methods: {
						loadData: function() {
							var that = this;
							new Request.ROC({
								'url': '/devcenter/control/detail/' + id + '.jwc',
								onSuccess: function(obj) {
									if (obj.success) {
										Object.assign(that.$data, obj.data);
										app._data = obj.data;
										app._data.id = id;
										that.$forceUpdate();
									}
								}
							}).send();
						},
						addPropertyLine: function() {
							var el = {
								"name": "",
								"groupName": "",
								"propertyName": "",
								"propertyRange": "",
								"propertyDef": "",
								"desc": ""
							};
							app.propertyList.push(el);
							app.$forceUpdate();
						},
						addEventLine: function() {
							var el = {
								"name": "",
								"eventName": "",
								"eventCaption": "",
								"template": "",
								"desc": ""
							};
							app.eventList.push(el);
							app.$forceUpdate();
						},
						selectPlatformType() {
							app._data.platformType = event.target.value;
						},
						selectControlType() {
							app._data.controlType = event.target.value;
						}, 
						save: function() {
							var posts = app._data;
							console.log(posts);
							//添加接口
							var url = '/devcenter/control/save.jwc';
							new Request.ROC({
								'url': url,
								data: posts,
								onSuccess: function(obj) {
									if (obj.success == 1) {
										app._data = obj.data;
										new JDialog.Pop({
											title: '提示信息',
											message: obj.message
										}).show();
									} else {
										new JDialog.Alert({
											title: '提示信息',
											message: obj.message
										}).show();
									}
								}
							}).post();
						},
						log(msg) {
							console.log(msg)
						}
					},
					mounted: function() {
						this.loadData();
					}
				});
			});
		</script>
	</body>

</html>
